<script setup>
import { getOrderList } from '@/api/my';

// 跳转订单详情
const order = (item) => {
  console.log('itme', item);
  uni.navigateTo({
    url: `/pages/orderdetails/orderdetails?id=${item.id}`
  });
};

//截取订单号
const formatOrderUuid = (uuid) => {
  if (uuid.length > 10) {
    return `${uuid.slice(0, 14)}...${uuid.slice(-4)}`;
  }
  return uuid;
};

// 定义页面数据
const orderData = ref([]);
const showNoData = ref(false);
const scrollHeight = ref(0);

const pageParams = ref({
  page: 1,
  pageSize: 5
});

// 获取订单数据
const fetchOrderData = async (isRefresh = false) => {
  try {
    if (isRefresh) {
      pageParams.value.page = 1; // 重置分页
      showNoData.value = false; // 重置显示无数据状态
    }

    const res = await getOrderList(pageParams.value);
    console.log('---------->', res);
    const newData = res.data;

    if (newData.length > 0) {
      orderData.value = isRefresh ? newData : [...orderData.value, ...newData]; // 重置或追加数据
      pageParams.value.page++; // 增加页码
    } else {
      if (isRefresh) orderData.value = []; // 重置数据
      showNoData.value = true; // 显示无数据状态
    }
  } catch (error) {
    console.error('获取订单数据失败:', error);
  }
};

// 复制功能
const copyText = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: '复制订单号成功'
      });
    }
  });
};

// 下拉刷新
const upper = () => {
  fetchOrderData(true);
};

//上拉加载更多
const lower = () => {
  fetchOrderData();
};

onMounted(() => {
  const windowHeight = uni.getSystemInfoSync().windowHeight;
  const windowWidth = uni.getSystemInfoSync().windowWidth;
  scrollHeight.value = (windowHeight * 750) / windowWidth - 115 - 30;
  fetchOrderData();
});
</script>

<template>
  <view class="header-card">
    <scroll-view scroll-y @scrolltoupper="upper" @scrolltolower="lower">
      <uni-card @click="order(item)" v-if="orderData.length > 0" v-for="(item, index) in orderData" :key="item.id">
        <!-- 订单号 -->
        <view class="order_number">
          <view>
            <text class="title">订单号 {{ formatOrderUuid(item.uuid) }}</text>
            <text class="copy" @click.stop="copyText(item.uuid)">复制</text>
          </view>
          <view class="status">
            <text v-if="item.using_status == 1 && !item.delayedStatus" style="color: rgba(16, 192, 185, 1)">使用中</text>
            <text v-else-if="item.using_status == 1 && item.delayedStatus" style="color: rgba(16, 192, 185, 1)">暂停中</text>
            <text v-else-if="item.using_status == 2 && !item.is_pay" style="color: rgba(254, 96, 15, 1)">待付款</text>
            <text v-else-if="item.using_status >= 3 && !item.is_pay" style="color: rgba(254, 96, 15, 1)">待付款</text>
            <text v-else-if="item.using_status == 2 && item.is_pay" style="color: #616169">已完成</text>
            <text v-else-if="item.using_status >= 3 && item.is_pay && item.single_bank == 0" style="color: #616169">已购买</text>
            <text v-else-if="item.using_status >= 3 && item.is_pay && item.single_bank >= 1" style="color: #616169">已回购</text>
          </view>
        </view>
        <!-- 租借地点 -->
        <view class="locations">
          <text class="title_1">租借地点</text>
          <text class="text_1">{{ item.box1_site_name }}</text>
        </view>
        <!-- 租借时间 -->
        <view class="time">
          <text class="title_1">租借时间</text>
          <text class="text_1">{{ item.borrow_time }}</text>
        </view>
        <!-- 计时和费用 -->
        <view class="text_minutes">
          <view class="status_container">
            <text class="minutes">使用时间 ：{{ item.distanceTime }}</text>
            <text class="minutes">金额 ：￥{{ item.fee }}</text>
          </view>
        </view>
      </uni-card>
      <view v-if="showNoData" style="margin-top: 40rpx; text-align: center; font-size: 34rpx">暂无数据哦!</view>
    </scroll-view>
    <!-- 返回顶部按钮，移除了未使用的类名 -->
    <!-- <view @tap="goTop" style="display: flex; justify-content: center; padding-bottom: 30rpx">点击返回顶部</view> -->
  </view>
</template>

<style lang="scss">
// 定义变量
$light-color: #ececec;
$text-color: #000;
$status-color: #9d9b98;
$border-color: #c8c4c1;

// 通用样式
%flex-space-between {
  display: flex;
  justify-content: space-between;
}

%text-style {
  font-size: 30rpx;
  color: $text-color;
}

// 页面样式
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: $light-color;
}

// 卡片样式
.uni-card {
  margin: 24rpx !important;
  padding: 8rpx !important;
  border-radius: 20rpx !important;

  // 订单号样式
  .order_number {
    @extend %flex-space-between;
    .title {
      font-size: 30rpx;
      font-weight: 700;
      color: $text-color;
    }
    .copy {
      margin-left: 14rpx;
      padding: 8rpx;
      @extend %text-style;
      border: 2rpx solid $border-color;
    }
    .status {
      padding-left: 10rpx;
      font-size: 28rpx;
      color: $status-color;
    }
  }

  // 地点和时间样式
  .locations,
  .time {
    @extend %flex-space-between;
    margin-top: 30rpx;
    .title_1 {
      font-size: 30rpx;
    }
    .text_1 {
      @extend %text-style;
    }
  }

  // 时间样式添加底部边框
  .time {
    padding-bottom: 30rpx;
    border-bottom: 2rpx solid $border-color;
  }

  // 计时和费用样式
  .text_minutes {
    @extend %flex-space-between;
    padding-top: 28rpx;
    .status_container {
      flex: 1;
      .minutes {
        font-size: 32rpx;
        padding-right: 32rpx;
        color: $text-color;
        font-weight: bold;
      }
    }
    // 图片样式
    .text_images {
      display: inline-block;
      width: 48rpx;
      height: 48rpx;
    }
  }
}
</style>
